<template>
	<view class="beijingse mainpadding">
		<!-- <view class="textright strongtext" v-if="list.length" @click="guanliflag=!guanliflag">管理</view> -->
		<!-- <view class="textright strongtext">取消管理</view> -->
		<view class="neirong">
			<view class="zwtimg flexcenter" v-if="!list.length">
				<image src="../../static/image/system/zwt.png" mode=""></image>
			</view>
			<view class="ffffff radius mainpadding"  v-if="list.length" v-for="item in list" :key="item.shop_id">
				<view class="flexleft" @click="tzdpxq(item.shop_id)">
					<!-- 已勾选 -->
					<view class="yigouxuan margin_right2" v-if="item.isall" @click.stop="checkitemAll(item)"></view>
					<!-- 未勾选 -->
					<view class="weigouxuan margin_right2" v-if="!item.isall" @click.stop="checkitemAll(item)"></view>
					<view class="haungfz margin_right1"></view>
					<view class="ershib margin_right3">{{item.shop_name}}</view>
					<view class="righticon"></view>
				</view>
				<view class="flexbetween margin_top" v-for="ite in item.goodslist" :key="ite.sku.goods_id" @click="tzspxq(ite.sku.goods_id)">
					<view class="" style="width: 8%;" @click.stop="cleckite(ite)">
						<!-- 已勾选 -->
						<view class="yigouxuan margin_right3" v-if="ite.ischeck"></view>
						<!-- 未勾选 -->
						<view class="weigouxuan margin_right2" v-if="!ite.ischeck"></view>
					</view>
					<view class="flextops" style="width: 91%;">
						<view class="shilitu">
							<image :src="ite.image" mode=""></image>
						</view>
						<view class="flexcolumn1" style="width: 63%;">
							<view class="ershil yhxiank">{{ite.title}}</view>
							<view class="huieshs margin_top2">{{ite.sku.difference.join()}}</view>
							<view class="flexbetween margin_top2" style="width: 100%;">
								<view class="qianshu">¥{{ite.sku.price}}</view>
								<view class="jiajian">
									<view class="jianhao" @click.stop="reduceite(ite)">
										<view class="line"></view>
									</view>
									<view class="xhtext">{{ite.number}}</view>
									<view class="jiahao"@click.stop="addite(ite)"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdibu1 ffffff mainpadding" v-if="list.length">
			<view class="flexbetween">
				<view class="flexleft" @click.stop="checkAll">
					<!-- 已勾选 -->
					<view class="yigouxuan margin_right3" v-if="ischeckAll"></view>
					<!-- 未勾选 -->
					<view class="weigouxuan margin_right3" v-if="!ischeckAll"></view>
					<view class="titletext">全选</view>
				</view>
				<view class="shuangpinbtn" v-show="guanliflag">
					<view class="flexleft">
						<view class="" style="margin-right: 94rpx;" @click="tzqrdd(1)">
							<view class="huigongtext textcenter">￥{{Number(price).toFixed(2)}}</view>
							<view class="xiaohhtext">直接普通购买</view>
						</view>
						<view class="" @click="tzqrdd(2)">
							<view class="bigbaitext textcenter">￥{{Number(flprice).toFixed(2)}}</view>
							<view class="xiaobtext">全额返利购买</view>
						</view>
					</view>
				</view>
				<!-- 移除购物车 -->
				<view class="xiaohuangbtn" v-show="!guanliflag" @click="deletcar">移出购物车</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list: [],
				ischeckAll:false,
				flprice:'0.00',
				price:"0.00",
				guanliflag:true,
			}
		},
		onShow() {
			this.init()
		},
		watch: {
			list:{
				handler(newval){
					let arr = 0
					let price = 0
					let flprice = 0
					newval.forEach(item=>{
						let arr1 = 0
						item.goodslist.forEach(ite=>{
							if(ite.ischeck){
								arr1 = arr1 + 1
								price = Number(price) + Number(ite.sku.price) * Number(ite.number)
								flprice = Number(flprice) + Number(ite.sku.fl_price) * Number(ite.number)
							}
						})
						if(arr1==item.goodslist.length){
							item.isall = true
						}else{
							item.isall = false
						}
						if(item.isall){
							arr = arr + 1
						}
					})
					if(arr==newval.length){
						this.ischeckAll = true
					}else{
						this.ischeckAll = false
					}
					this.flprice = flprice
					this.price = price
				},
				deep:true
			}
		},
		// 右上角文字回调事件
		onNavigationBarButtonTap(e) {
			this.guanliflag=!this.guanliflag
		},
		methods: {
			init() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				httpRequest.request('/api/cart/cartList', 'POST', {}).then(res => {
					res.data.forEach(item => {
						this.$set(item, "isall", false)
						item.goodslist.forEach(ite => {
							this.$set(ite, "ischeck", false)
						})
					})
					this.list = res.data
				})
			},
			checkitemAll(item) {
				if (item.isall) {
					item.isall = false
					item.goodslist.forEach(ite => {
						ite.ischeck = false
					})
				} else {
					item.isall = true
					item.goodslist.forEach(ite => {
						ite.ischeck = true
					})
				}
			},
			cleckite(ite){
				ite.ischeck = !ite.ischeck
			},
			checkAll(){
				if(this.ischeckAll){
					this.ischeckAll = false
					this.list.forEach(item=>{
						item.isall = false
						item.goodslist.forEach(ite=>{
							ite.ischeck = false
						})
					})
				}else{
					this.ischeckAll = true
					this.list.forEach(item=>{
						item.isall = true
						item.goodslist.forEach(ite=>{
							ite.ischeck = true
						})
					})
				}
			},
			// 购物车减
			reduceite(ite){
				if(ite.number==1){
					httpRequest.toast("不能再减了哦")
					return
				}
				ite.number = Number(ite.number) - 1
				httpRequest.request('/api/cart/clCart', 'POST', {
					goods_id:ite.sku.goods_id,
					sku_id:ite.sku.id,
					number:ite.number
				}, false, false, true).then(res => {
					if(res.code==0){
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 购物车加
			addite(ite){
				ite.number = Number(ite.number) + 1
				httpRequest.request('/api/cart/clCart', 'POST', {
					goods_id:ite.sku.goods_id,
					sku_id:ite.sku.id,
					number:ite.number
				}, false, false, true).then(res => {
					if(res.code==0){
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 进入店铺
			tzdpxq(id) {
				uni.navigateTo({
					url: '/pages/homepage/dianpuxq?id='+id
				})
			},
			// 跳转商品详情
			tzspxq(id) {
				let obj = {
					goods_id: id
				}
				uni.navigateTo({
					url: '/pages/homepage/shangpinxq?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			deletcar(){
				httpRequest.modal('提示', '确定删除当前选中数据吗？', true, (res) => {
					if (res) {
						let data = []
						this.list.forEach(item=>{
							item.goodslist.forEach(ite=>{
								if(ite.ischeck){
									data.push({
										goods_id:ite.sku.goods_id,
										sku_id:ite.sku.id
									})
								}
							})
						})
						if(data.length==0){
							httpRequest.toast("请选择商品再进行操作")
							return
						}
						httpRequest.request('/api/cart/delCart', 'POST', {
							data: data,
						}).then(res => {
							httpRequest.toast(res.msg)
							this.init()
						})
					}
				})
			},
			// 跳转确认订单
			tzqrdd(value) {
				// 1普通商品,2返利商品
				let obj = {
					buy_type:value,
					type:'cart',
					data:[],
					goods_type:1,
				}
				this.list.forEach(item=>{
					item.goodslist.forEach(ite=>{
						if(ite.ischeck){
							obj.data.push({
								goods_id:ite.sku.goods_id,
								sku_id:ite.sku.id,
								number:ite.number
							})
						}
					})
				})
				if(obj.data.length==0){
					httpRequest.toast("请选择商品再进行操作")
					return
				}
				uni.navigateTo({
					url: '/pages/homepage/querendingdan?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.neirong{
		padding-bottom: 244rpx;
	}
	.huieshs {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.gudingdibu1 {
		/*#ifdef H5*/
		bottom: 94rpx;
		/*#endif*/
		/*#ifdef MP-WEIXIN || APP-PLUS*/
		bottom: 94rpx;
		/*#endif*/
		position: fixed;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.jiahao {
		background-size: 100% 100%;
		width: 21rpx;
		height: 19rpx;
		position: absolute;
		top: 14rpx;
		right: 12rpx;
		background-image: url('../../static/image/system/jiaohao.png');
	}

	.jianhao {
		width: 22rpx;
		position: absolute;
		left: 13rpx;
		// height: 3.5rpx;
		top: 20rpx;
		height: 20rpx;

		.line {
			height: 3.5rpx;
			width: 22rpx;
			background-color: #999999;
		}
	}

	.xhtext {
		font-size: 31rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.jiajian {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 164rpx;
		height: 46rpx;
		position: relative;
		border-radius: 20rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/jiajian.png');
	}

	.qianshu {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.shilitu {
		width: 196rpx;
		height: 188rpx;
		border-radius: 14rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.yhxiank {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		display: -webkit-box; //特别显示模式
		-webkit-line-clamp: 2; //行数
		line-clamp: 2;
		-webkit-box-orient: vertical; //盒子中内容竖直排列
	}
	.flexcolumn1{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: column;
		height: 200rpx;
	}
</style>
